<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大嘿嘿后台管理</title>
		<link rel="stylesheet" type="text/css" href="css/antd.css"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios-0.18.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/interfaceuRL.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		table{
			margin-top: 30px;
			width: 100%;
			height: 100%;
			text-align: center;
		}
		.a1{
			display: flex;
			justify-content: space-between;
		}
		.b1{
			border:0.00625rem solid black;
			width: 20px;
			text-align: center;
		}
		.b1 a{
			color: #000000;
		}
	</style>
	<body>
		<div id="app">
		<div>
			<p style="text-align: right;background-color: #f5faff;margin-top:20px;">共{{CommentItem.length}} 条记录</p>
		</div>
		<div class="a1">
			<div style="text-align: center;">
				显示 
				<select name=""  class="num" @change="changeSize()">
					<option value="10">10</option>
					<option value="9">9</option>
					<option value="8">8</option>
					<option value="7">7</option>
					<option value="6">6</option>
					<option value="5">5</option>
					<option value="4">4</option>
					<option value="3">3</option>
					<option value="2">2</option>
					<option value="1">1</option>
				</select>
				条
				</div>
			<div colspan="8" style="text-align:right;">从当前数据中检索:<input type="text" id="" value=""  v-model="userkey"/></div>
		</div>
		<table border="" cellspacing="0" cellpadding="">
			
			<tr style="background-color:#f5faff ;font-weight:bold;">
				<td><input type="checkbox" /></td>
				<td style="background-color:#f5faff">用户ID</td>
				<td>评论内容</td>
				<td>操作</td>
			</tr>
			<tr v-for="(item,index) in cc" :key="index">
				<td><input type="checkbox" name="" id="" value=""/></td>
				<td style="background-color: #f5faff;">{{item.uid}}</td>
				<td>{{item.content}}</td>
				<td><span class="glyphicon glyphicon-cloud" @click="delEmp(item.uid)"></span></td>
			</tr>
			
		</table>
		<!-- 下 分页 -->
		<div id="" style="display: flex;">
			<span style="margin-left: 50px;margin-top: 20px;">
				<span v-if="num==0">没有数据</span>
				<span v-else>显示 {{1+(pageSize*currentPage)}} 到 {{pageSize*(currentPage)+cc.length}}</span>
				， 共 {{num}} 条
			</span>
			<nav aria-label="Page navigation"  style="position: absolute;right: 0px;margin-right: 50px;">
			  <ul class="pagination">
				<li  @click="prePage()">
				  <a href="#" aria-label="Previous">
					<span aria-hidden="true">上一页</span>
				  </a>
				</li>
				</ul>
				
				<ul class="pagination" v-for="index of pageNum" :key="index">
					<li @click="Page(index)"><a href="#">{{index}}</a></li>
				</ul>
				
				<ul class="pagination">
				<li  @click="nextPage()">
				  <a href="#" aria-label="Next">
					<span aria-hidden="true">下一页</span>
				  </a>
				</li>
			  </ul>
			</nav>
			
		</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm=new Vue({
		el:"#app",
		data:{
			userkey:"",
			CommentItem:[],
			num:0,
		  // 所有页面的数据
		  totalPage: [],
		  // 每页显示数量
		  pageSize: 10,
		  // 共几页
		  pageNum: 1,
		  // 当前显示的数据
		  dataShow: "",
		  // 默认当前显示第一页
		  currentPage: 0,
			
		},
		
		//在挂载开始之前被调用：相关的渲染函数首次被调用
				beforeMount: function() {
					var _this=this;
					axios({
					   //请求方式，'GET'或者'POST'
					    method: 'POST',
					    //请求地址
					    url: findComment(),
					}).then(res => {
		                 	// _this.CommentItem=res.data;
							console.log(res.data[0]);
							_this.CommentItem=res.data;
							
								// 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
								_this.pageNum = Math.ceil(_this.CommentItem.length / _this.pageSize) || 1;
								
								
								   for (let i = 0; i < _this.pageNum; i++) {
									  // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
									  // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
									  _this.totalPage[i] = _this.CommentItem.slice(_this.pageSize * i, _this.pageSize * (i + 1))
									}
								   // 获取到数据后显示第一页内容
									_this.dataShow = _this.totalPage[_this.currentPage];
					}).catch(err => {
						alert("服务出错了!")
						
					  })
				
				 },
				 //查询
				computed:{
					 cc:function(){
					 	var _this=this;
					// 	return this.Artice.filter(function(val){
					// 		if(val.title.indexOf(_this.articlekey)!=-1){
					// 			return val;
					// 		}
					// 		return ""
					// 	});
						_this.num=0;											
						mess=[];
						_this.CommentItem.filter(function(val){
							
							if(val.content.indexOf(_this.userkey)!=-1){
								mess.push(val)
								_this.num++
							}
							
						})
						// 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
						_this.pageNum = Math.ceil(mess.length / _this.pageSize) || 1;
						
						   for (let i = 0; i < _this.pageNum; i++) {
							  // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
							  // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为3， 则第一页是1-3条，即slice(0,3)，第二页是4-6条，即slice(3,6)...
							  _this.totalPage[i] = mess.slice(_this.pageSize * i, _this.pageSize * (i + 1))
							}
						   // 获取到数据后显示第一页内容
							return _this.totalPage[_this.currentPage];
							
					}
				},
				methods:{
					//删除
					delEmp:function(cid){
						//将数组中的某行删除						
						var isOk=confirm;
						console.log(cid)
						if(isOk){
							axios({
							   //请求方式，'GET'或者'POST'
								method: 'GET',
								//请求地址
								url:commentdel()+cid
							}).then(res => {
									alert(res.data.msg)
									 window.location.reload()
							}).catch(err => {
								 alert("服务出错了!")
								
							  });
						}
						},
						//改变显示条数
						changeSize:function(){
							this.pageSize=$(".num").val();
						},
						
						//点击页数
						Page:function(index) {
						  this.dataShow = this.totalPage[index-1];
						  this.currentPage=index-1;
						},
						// 上一页和下一页
						// 下一页
						nextPage:function() {
						  if (this.currentPage === this.pageNum - 1) return ;
						  this.dataShow = this.totalPage[++this.currentPage];
						},
						// 上一页
						prePage:function() {
						  if (this.currentPage === 0) return ;
						  this.dataShow = this.totalPage[--this.currentPage];
						},
					}
					
				
	})
</script>